<template>
  <div class="mealorder" v-loading="loading">
    <div class="mealorder-select">
      <div
        :class="[active == 1 ? 'mealorder-select-border' : '']"
        @click="onActive(1)"
      >
        本周
      </div>
      <div
        :class="[active == 0 ? 'mealorder-select-border' : '']"
        @click="onActive(0)"
      >
        下周
      </div>
    </div>
    <div>
      <div class="mealorder-title">点餐汇总</div>
      <el-button
        type="primary"
        style="margin: 20px 0"
        @click="dialogVisible = true"
        >添补</el-button
      >
      <el-table :data="foodlisttotal" style="width: 100%" border>
        <el-table-column
          label="楼层"
          align="center"
          prop="floor"
        ></el-table-column>
        <el-table-column
          label="周一"
          align="center"
          prop="周一"
        ></el-table-column>
        <el-table-column
          label="周二"
          align="center"
          prop="周二"
        ></el-table-column>
        <el-table-column
          label="周三"
          align="center"
          prop="周三"
        ></el-table-column>
        <el-table-column
          label="周四"
          align="center"
          prop="周四"
        ></el-table-column>
        <el-table-column
          label="周五"
          align="center"
          prop="周五"
        ></el-table-column>
        <el-table-column
          label="周六"
          align="center"
          prop="周六"
        ></el-table-column>
        <el-table-column
          label="周日"
          align="center"
          prop="周日"
        ></el-table-column>
      </el-table>
    </div>
    <div>
      <div class="mealorder-title">点餐名单记录</div>
      <el-form ref="form" :model="data" label-position="top" class="myform">
        <div>
          <el-form-item label="员工姓名" class="myform-item">
            <el-input
              v-model="data.username"
              placeholder="请输入员工姓名"
              @keyup.enter.native="onSearch"
              size="normal"
            ></el-input>
          </el-form-item>
          <el-form-item label="日期" class="myform-item">
            <el-date-picker
              v-model="data.order_date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-form-item style="margin-top: 50px">
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-table :data="list" style="width: 100%" border>
        <el-table-column
          label="姓名"
          align="center"
          prop="username"
        ></el-table-column>
        <el-table-column
          label="楼层"
          align="center"
          prop="floor"
        ></el-table-column>
        <el-table-column
          label="订餐日期"
          align="center"
          prop="order_date"
        ></el-table-column>
      </el-table>
      <pagination
        :form="data"
        :total="total"
        @paginationPostOrderTaskList="postAdminUserGetuserorderlist"
      />
    </div>
    <el-dialog
      title="添补点餐"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <div class="dialoginput">
          <span>点餐楼层：</span>
          一楼
        </div>
        <div class="dialoginput">
          <span>点餐日期：</span>
          <el-select v-model="form.order_date" placeholder="请选择">
            <el-option
              v-for="item in foodlist"
              :key="item.date"
              :value="item.date"
              >{{ item.date }} {{ item.week }}</el-option
            >
          </el-select>
        </div>
        <div class="dialoginput">
          <span>添补数量：</span>
          <el-input
            placeholder="请输入菜单名称"
            type="number"
            v-model="form.num"
            style="width: 220px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminUserGetuserordertotal,
  postAdminUserGet_food_list,
  postAdminUserSetSupplementFloor,
  postAdminUserGetuserorderlist,
} from "@/api";
import { getCurrentTime } from "@/utils/time.js";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      row: {},
      active: 1,
      foodlisttotal: [],
      foodlist: [],
      form: {
        floor: 1,
        num: 0,
        order_date: "",
      },
      data: {
        username: "",
        order_date: "",
        page: 1,
        size: 10,
      },
      list: [],
      total: 1,
    };
  },
  mounted() {
    this.data.order_date = getCurrentTime();
    this.postAdminUserGetuserordertotal();
    this.postAdminUserGet_food_list();
    this.postAdminUserGetuserorderlist(this.data);
  },
  methods: {
    onConfirm() {
      this.loading = true;
      let { form } = this;
      if (form.num && form.order_date) {
        postAdminUserSetSupplementFloor(form)
          .then((res) => {
            this.postAdminUserGetuserordertotal();
            this.$message.success("添补点餐成功");
            this.dialogVisible = false;
            this.loading = false;
          })
          .catch((err) => {
            this.loading = false;
          });
      } else {
        this.$message.warning("请填选完整内容");
      }
    },
    onActive(e) {
      this.active = e;
      this.postAdminUserGetuserordertotal();
      this.postAdminUserGet_food_list();
    },
    postAdminUserGetuserordertotal() {
      this.loading = true;
      let is_toweek = this.active;
      let data = {
        is_toweek,
      };
      postAdminUserGetuserordertotal(data)
        .then((res) => {
          let foodlist = res.data.list;
          foodlist.push(res.data.count);
          this.foodlisttotal = foodlist;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    postAdminUserGet_food_list() {
      let is_toweek = this.active;
      let data = {
        is_toweek,
      };
      postAdminUserGet_food_list(data).then((res) => {
        this.foodlist = res.data;
      });
    },
    //点餐名单记录
    async postAdminUserGetuserorderlist(data) {
      this.data = data;
      try {
        let obj = await postAdminUserGetuserorderlist(data);
        console.log("obj--->", obj);
        this.list = obj.data;
        this.total = Number(obj.total);
      } catch (error) {}
    },
    // 查询
    onSearch() {
      this.data.page = 1;
      this.data.size = 10;
      this.postAdminUserGetuserorderlist(this.data);
    },
  },
};
</script>

<style lang="scss" scoped>
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.dialoginput {
  margin-top: 20px;
  display: flex;
  align-items: center;
  > span {
    width: 100px;
  }
}
.mealorder {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
  .mealorder-select {
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    > div {
      width: 120px;
      text-align: center;
      font-size: 20px;
      height: 60px;
      line-height: 60px;
      margin-right: 30px;
    }
    .mealorder-select-border {
      border-bottom: 2px solid #409eff;
      color: #409eff;
    }
  }
  .mealorder-title {
    font-size: 20px;
    font-weight: 800;
    margin-top: 20px;
  }
}
</style>